<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>FullScreenTest</title>
</head>
<body>
<div  onclick = 'testFullScreen' style='width:500px;height:500px;background:red;'>
    <audio controls height='100' width='100' id='content'>
        <source src='horse.mp3' type='audio/mpeg'>
        <source src='horse.ogg' type='audio/ogg'>
    </audio>
    这是被全屏的元素
    <button id='btn'>全屏</button>
    <button id='closeBtn'>退出全屏</button>
</div>

</body>
<script>
    let ele = document.getElementById('content');
    let loadContent;
    window.onload = function() {
        loadContent = 'load complete';
        var btn = document.getElementById('btn');
        btn.click();
    };

    function test() {
        backToEts.test('backToEts');
    }

    function fullScreen(el) {
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen,
            wscript;
        if (typeof rfs !== 'undefined' && rfs) {
            rfs.call(el);
            return;
        }
        if (typeof window.ActiveXObject !== 'undefined') {
            wscript = new ActiveXObject('WScript.Shell');
            if (wscript) {
                wscript.SendKeys('{F11}');
            }
        }
    }
    function exitFullScreen(el) {
        var el = document,
            cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen,
            wscript;
        if (typeof cfs !== 'undefined' && cfs) {
        cfs.call(el);
        return;
        }
        if (typeof window.ActiveXObject !== 'undefined') {
            wscript = new ActiveXObject('WScript.Shell');
            if (wscript !== null) {
                wscript.SendKeys('{F11}');
            }
    }
    }

    btn.onclick = function() {
        var btn = document.getElementById('btn');
        var content = document.getElementById('content');
        fullScreen(content);
    };
    var closeBtn = document.getElementById('closeBtn');
    closeBtn.onclick = function() {
        exitFullScreen();
    };

    function elementFullScreen() {
        let content = document.getElementById('content');
        return content.requestFullscreen();
    }

    function testFullScreen() {
        if (document.fullscreenElement) {
            console.log('already fullscreen return');
            return null;
        }
        let content = document.getElementById('content');
        return content.requestFullscreen();
    }

    function elementExitFullScreen() {
        document.exitFullscreen();
    }

    function checkIsFullScreen() {
        var isFull = !! (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement || document.fullscreenElement);
        return isFull;
    }
</script>
</body>
</html>
